import React from 'react'
import {useLocation} from "react-router-dom"
import { GridItem } from 'react-vant';
import { ActionBar } from 'react-vant';
import * as action from "../action"
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import {useDispatch} from "react-redux"
import {useNavigate} from "react-router-dom"
function Detail() {
   let navigate = useNavigate()
  let location = useLocation()
  let dispatch = useDispatch()
  console.log(location);
  let addshop = (item)=>{
        // console.log(item);// 要将这个对象添加到仓库中
        // redux三步走原则
        // 1.组件中调用action里的方法
        dispatch(action.addshop(item))
  }
  return (
    <div>
        <img src={location.state.img} alt="" style={{width:"100%",height:"auto"}} />
        <h3>标题：{location.state.tit}</h3>
        <h3>描述：{location.state.des}</h3>
        <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() =>navigate("/home/shopcar")}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='加入购物车'
          onClick={() => addshop(location.state)}
        />
      </ActionBar>
    </div>
  )
}

export default Detail